<template>
  <div class="settings-container">
    <el-form :model="settings" label-width="120px">
      <el-form-item label="背景类型">
        <el-radio-group v-model="settings.backgroundType">
          <el-radio label="color">纯色背景</el-radio>
          <el-radio label="image">图片背景</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="背景颜色" v-if="settings.backgroundType === 'color'">
        <el-color-picker v-model="settings.backgroundColor" />
      </el-form-item>

      <el-form-item label="背景图片" v-else>
        <el-upload
          class="background-uploader"
          :show-file-list="false"
          accept="image/*"
          :on-success="handleImageSuccess"
        >
          <img v-if="settings.backgroundImage" :src="settings.backgroundImage" class="preview-image">
          <el-icon v-else class="upload-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="动画速度">
        <el-select v-model="settings.animationSpeed">
          <el-option label="慢速" value="slow" />
          <el-option label="正常" value="normal" />
          <el-option label="快速" value="fast" />
        </el-select>
      </el-form-item>

      <el-form-item label="音效">
        <el-switch v-model="settings.soundEnabled" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveSettings">保存设置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useSettingsStore } from '../store/settings'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const settingsStore = useSettingsStore()
const settings = ref({ ...settingsStore.$state })

const handleImageSuccess = (response) => {
  settings.value.backgroundImage = response.url
}

const saveSettings = () => {
  settingsStore.updateSettings(settings.value)
  ElMessage.success('设置保存成功')
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 600px;
}

.background-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.background-uploader:hover {
  border-color: #409eff;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style> 